<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Bootstrap 实例 - 边框表格</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
  <style>
    .modal-body {
      margin-left: 100px;
    }

    #nameInput,
    #cityInput {
      outline: none;
      border: 1px solid rgb(121, 120, 120, 0.5);
      border-radius: 4px;
    }

    label {
      color: rgba(47, 47, 47, 0.9);
      font-weight: 400px;
      font-size: 14px;
      font-family: Arial, Helvetica, sans-serif;
    }

    /* 删除 */
    .companyDelete {
      width: 100%;
      height: 100%;
      background-color: rgba(129, 127, 127, 0.298);
      position: fixed;
      top: 0px;
      left: 0px;
      display: flex;
      justify-content: center;
      align-items: center;
      display: none;
    }

    .companyDeleteMin {
      width: 300px;
      height: 150px;
      background-color: #FFFFFF;
      position: fixed;
      top: calc(50% - 75px);
      left: calc(50% - 150px);
    }
    #pages:hover{
      cursor: pointer;
    }
    /* 样式 */
    .cuStyle{
      background-color: pink;
      border-radius:4px ;
    }
  </style>
</head>

<body>
  <button type="button" class="btn btn-default">增加</button>
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>名称</th>
        <th>城市</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
  <div style="display: flex;width: 400px;height: 22px;">
    <div style="font-size: 16px;">&lt;</div>
    <div id="pages" style="display: flex;"></div>
    <div style="font-size: 16px;">&gt;</div>
  </div>
  <!-- 模态框（Modal） -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
          <h4 class="modal-title" id="myModalLabel">修改</h4>
        </div>
        <div class="modal-body">
          <p>
            <label>名字:</label><input type="text" id="nameInput" />
          </p>
          <p>
            <label>城市:</label><input type="text" id="cityInput" />
          </p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal" id="shutDown">关闭</button>
          <button type="button" class="btn btn-primary" id="commitChanges">提交修改</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 删除 -->
  <div class="companyDelete">
    <div class="companyDeleteMin" style="padding: 40px 10px;">
      <form style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
        <div style="display: flex;justify-content: center;align-items: center;line-height: 30px;">
          <span class="iconfont icon-cuowu" style="color: red;font-size:32px;"></span>
          <label style="font-size: 16px;">确定是否删除该企业?</label>
        </div>

      </form>
      <div style="display: flex;justify-content: center;align-items: center;">
        <button class="floorOk" id="deleteBtn">确 定</button>&nbsp;&nbsp;
        <button class="floorDeselect" id="deselectBtn">取 消</button>
      </div>
    </div>
  </div>


  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.js"></script>
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script>
    const data = [
      { id: 1, name: "李四", city: "重庆" },
      { id: 2, name: "张三", city: "成都" },
      { id: 3, name: "王五", city: "武汉" },
      { id: 3, name: "赵月", city: "达州" },
      { id: 3, name: "李明", city: "武汉" },
      { id: 3, name: "凤凤", city: "乐山" },
      { id: 3, name: "张怀", city: "河北" },
      { id: 3, name: "钱田", city: "沧州" },
      { id: 3, name: "赵明", city: "眉山" },
      { id: 3, name: "冯敏", city: "山西" },
      { id: 3, name: "李明明", city: "新疆" },
      { id: 3, name: "程风风", city: "重庆" },
      { id: 3, name: "花浅浅", city: "攀枝花" },
      { id: 3, name: "美丽", city: "武汉" },
      { id: 3, name: "梅子", city: "甘肃" },
      { id: 3, name: "时", city: "西安" },
      { id: 3, name: "孟楠", city: "武汉" },
      { id: 3, name: "孟婷", city: "山西" },
      { id: 3, name: "花花", city: "武汉" },
      { id: 3, name: "王五", city: "凉山" },
      { id: 3, name: "王五", city: "北京" },

    ];
    let pageSize=5;
    function renderBody(data,cu=1) {

      let startIndex=pageSize*(cu-1);
      let endIndex=pageSize+startIndex;
      let dataByPaging=data.slice(startIndex,endIndex);

      $("tbody").empty();
      $("#pages").empty();
      for (let i = 0; i < dataByPaging.length; i++) {
        let items = dataByPaging[i];
        $("tbody").append(`<tr>
            <td id="name">${items.name}</td>
            <td id="city">${items.city}</td>
            <td>
              <button type="button" class="btn btn-default"  data-toggle="modal" data-target="#myModal" id="${items.id}">修改</button>
              <button type="button" class="btn btn-danger" id="${items.id}">删除</button>  
              </td>
            </tr>`);
      };
      pages(data,cu);
    }
    renderBody(data);
    // 分页
    function pages(data,cu=1){
      let num=parseInt(data.length/pageSize);
      for(let i=1;i<=num;i++){
        $("#pages").append(`<div style="display:block; width: 20px;height: 20px;text-align:center;">${i}</div>`);
      }
        $("#pages>div").eq(cu-1).addClass("cuStyle");
    }

    $("#pages").on("click","div",function(event){
      let cu=parseInt($(event.target).text());
      renderBody(data,cu);
    });


    let id = null;
    $("tbody").on("click", ".btn-default", function (event) {
      // console.log(typeof event.target.id);
      id = event.target.id;
      for (let i = 0; i < data.length; i++) {
        let dataId = data[i].id;
        // console.log(typeof dataId);
        if (String(dataId) === id) {
          // alert("123");
          $("#nameInput").val(data[i].name);
          $("#cityInput").val(data[i].city);
        }
      }
    });

    $("#commitChanges").on("click", function (event) {
      let name = $("#nameInput").val();
      let city = $("#cityInput").val();
      for (let i = 0; i < data.length; i++) {
        let items = data[i];
        let dataId = data[i].id;
        if (String(dataId) === id) {
          items.name = name;
          items.city = city;
        }
      }
      renderBody(data);
      $(function () { $('#myModal').modal('hide') });
    });

    // 删除
    $("tbody").on("click", ".btn-danger", function (event) {
            $(".companyDelete").show();
            // console.log($(event.target).attr("id"));
            let id = parseInt($(event.target).attr("id"));

            $("#deleteBtn").on("click", () => {
                for (let i = 0; i < data.length; i++) {
                    if (data[i].id === id) {
                        data.splice(i, 1);
                        i--;
                    }
                    renderBody(data);
                };
                $(".companyDelete").hide();
            });

            $("#deselectBtn").on("click", () => {
                $(".companyDelete").hide();
            });

        });
  </script>
</body>

</html>